import React, { useState } from 'react';
import { Form, Input, Button, Card, message, Divider, Space } from 'antd';
import { UserOutlined, LockOutlined, WechatOutlined, QqOutlined } from '@ant-design/icons';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import './Login.scss';

const Login = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const location = useLocation();
  const { login } = useAuth();
  const [loading, setLoading] = useState(false);

  const from = location.state?.from?.pathname || '/';

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      const result = await login(values);
      if (result.success) {
        navigate(from, { replace: true });
      }
    } catch (error) {
      console.error('登录错误:', error);
    } finally {
      setLoading(false);
    }
  };



  return (
    <div className="login-page">
      <div className="login-container">
        <Card className="login-card">
          <div className="login-header">
            <h2>欢迎回来</h2>
            <p>登录您的思研社账户</p>
          </div>

          <Form
            form={form}
            name="login"
            onFinish={handleSubmit}
            autoComplete="off"
            size="large"
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: '请输入用户名、手机号或邮箱' },
              ]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="用户名、手机号或邮箱"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码长度不能少于6位' },
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="密码"
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                block
                className="login-button"
              >
                登录
              </Button>
            </Form.Item>

            {/* <div className="login-options">
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => setLoginType(loginType === 'password' ? 'code' : 'password')}
                >
                  {loginType === 'password' ? '验证码登录' : '密码登录'}
                </Button>
                <Link to="/forgot-password">忘记密码？</Link>
              </Space>
            </div> */}

            {/* <Divider>或</Divider>

            <div className="third-party-login">
              <Space size="large">
                <Button
                  icon={<WechatOutlined />}
                  onClick={() => handleThirdPartyLogin('微信')}
                  className="third-party-btn wechat"
                >
                  微信登录
                </Button>
                <Button
                  icon={<QqOutlined />}
                  onClick={() => handleThirdPartyLogin('QQ')}
                  className="third-party-btn qq"
                >
                  QQ登录
                </Button>
              </Space>
            </div>

            <div className="register-link">
              还没有账户？ <Link to="/register">立即注册</Link>
            </div> */}
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default Login; 